<template>
  

  <div @click="$router.push(`/detail/${postData.id}`)">
      <div class="single" v-if="postData.type===1 && postData.cover.length <=2">
         <!-- 单张照片展示 -->
         <div class="info">
             <div class="title">{{postData.title}}</div>
             <p class="buttom">
                 <span>{{postData.user.nickname}}</span>
             <span>{{postData.comment_length}}跟帖</span>
             </p>
         </div>
         <img class='cover' :src="postData.cover[0].url" alt="">
      </div>
      
      <div class="multiple" v-else-if="postData.type===1 && postData.cover.length >=3">
          <!-- 三张照片的展示 -->
        
             <div class="title">{{postData.title}}</div>
             <div class="cover_group">
                 <img class='cover' :src="postData.cover[0].url" alt="">
                 <img class='cover' :src="postData.cover[1].url" alt="">
                 <img class='cover' :src="postData.cover[2].url" alt="">
                 </div>
             <p class="buttom">
                 <span>{{postData.user.nickname}}</span>
             <span>{{postData.comment_length}}跟帖</span>
             </p>
  
      </div>
      
      <div class="video" v-else-if="postData.type===2 && postData.cover.length >=1">
           <!-- 视频展示 -->
             <div class="title">{{postData.title}}</div>
             <div class="video_group">
                 <i class="iconfont iconshipin"></i>
                 <img class='cover' :src="postData.cover[0].url" alt="">
                 </div>
             <p class="buttom">
                 <span>{{postData.user.nickname}}</span>
             <span>{{postData.comment_length}}跟帖</span>
             </p>
      </div>
  </div>
</template>

<script>
export default {
    props:['postData']
}
</script>
<style lang="less" scoped>
   .title {
font-size: 16px;
    }
    .buttom{
        font-size: 14px;
        span {
        color: #9c9c9c;
        margin-right: 10px;
    }
    }
.single {
    display: flex;
    padding: 10px;
    border: 1px solid #ddd; 
 
  .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-right: 10px;
 

    
  }

  .cover {
      width: 120px;
      height: 75px;
        object-fit: cover;
  }
}
.multiple {
    padding: 10px;
    border: 1px solid  #ddd;
  
  .cover_group {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
   .cover {
         width: 33%;
         height: 75px;
         object-fit: cover;
    }
  }

}
.video {
    padding: 10px;
    border: 1px solid #ddd; 

  .video_group {
      margin: 10px 0;
      display: flex;
      justify-content: center;
      align-items: center;
    .iconshipin {
       position: absolute;
       color: #fff;
       background-color: rgba(0,0 ,0 , 0.5);
       font-size: 50px;
       border-radius: 50%;
    }
    .cover {
         width: 100%;
         height: 170px;
         object-fit: cover;
    }
  }

}
</style>